<script lang="ts">
  import {
    Table,
    TableBody,
    TableBodyCell,
    TableBodyRow,
    TableHead,
    TableHeadCell,
    Checkbox,
    Input,
    Label,
  } from 'svelte-5-ui-lib'
  import { EyeSlashOutline, CloseCircleOutline } from 'flowbite-svelte-icons'
  import KeyValueTable from '$lib/utils/tableData.svelte'
  import { defaultHeaders } from '$lib/const'
  import { updateHeaders } from '$lib/utils/stores.svelte'
  let headers = $state(new KeyValueTable({ rows: defaultHeaders }))
  let hiddenDefaultHeaders = $state(true)
</script>
<Table divClass="m-0 max-h-100 overflow-y-auto rounded-xl shadow-md bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 transition-all duration-200">
  <TableHead class="text-md sticky !text-24 top-0 bg-gray-50 dark:bg-zinc-800 text-gray-500">
    <TableHeadCell class='w-5'>
      <EyeSlashOutline class="w-5 hover:text-orange-600 transition-colors duration-150" onclick={() => (hiddenDefaultHeaders = !hiddenDefaultHeaders)} />
    </TableHeadCell>
    <TableHeadCell>键</TableHeadCell>
    <TableHeadCell>值</TableHeadCell>
    <TableHeadCell />
  </TableHead>
  <TableBody class="divide-y !p-0 !m-0">
    {#each headers.rows as row, i}
      <TableBodyRow hidden={hiddenDefaultHeaders && row.isDefault} class="border-none !p-0 !m-0 bg-orange-50 {row.isDefault ? 'bg-gray-100 dark:bg-gray-700' : 'bg-white'} rounded-lg hover:shadow-lg transition-all duration-150">
        <TableBodyCell>
          <Checkbox checked={row.valid} />
        </TableBodyCell>
        <TableBodyCell>
          <Input class="border-white text-orange-700 focus:text-gray-700 dark:text-orange-500 min-h-8 focus:bg-gray-50 focus:outline focus:outline-primary-500 rounded-md shadow-sm transition-all duration-150 {row.isDefault ? 'bg-gray-100 text-gray-300 dark:bg-gray-700' : '!bg-gray-50'}" required placeholder="Key" bind:value={row.key} size="sm" onblur={() => { row.key = row.key.replace(/_/g, '-'); headers.handleBlur(i); const invalid = headers.isValidHeaderKey(row.key); if (!invalid) { row.value = `[非法键] ${row.key}`; row.valid = false; } }} />
        </TableBodyCell>
        <TableBodyCell class="border-none !p-0 !m-0">
          <Input size="sm" placeholder="Value" class="border-white text-orange-700 focus:text-gray-700 dark:text-orange-500 min-h-8 focus:bg-gray-50 focus:outline focus:outline-primary-500 rounded-md shadow-sm transition-all duration-150 {row.isDefault ? 'bg-gray-100 text-gray-300 dark:bg-gray-700' : '!bg-gray-50'}" bind:value={row.value} onblur={() => { headers.handleBlur(i); if (row.isFull) { updateHeaders(headers.keyValueObject) } }} />
        </TableBodyCell>
        <TableBodyCell class="border-none">
          <Label hidden={row.isDefault}>
            <CloseCircleOutline class="w-4 h-4 text-gray-400 hover:text-orange-600 transition-colors duration-150" onclick={() => { headers.removeRow(row.id); updateHeaders(headers.keyValueObject) }} />
          </Label>
        </TableBodyCell>
      </TableBodyRow>
    {/each}
  </TableBody>
</Table>